<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet" />
    <link th:href="@{/css/animate.css}" rel="stylesheet" />
    <link th:href="@{/css/style.css}" rel="stylesheet" />
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet" />
    <link th:href="@{/css/my.css}" rel="stylesheet" />
    <!-- layui -->
    <script th:src="@{/ajax/libs/layui/layui.js}"></script>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
</head>

<body class="gray-bg">
    <!--右侧主体-->

    <div class="Testing">
        <!--搜索区域-->
        <div class="row rowNew">
            <div class="col-sm-12 search-area">
                <form id="formId">
                    <div class="select-list">
                        <ul class="ulForm clearfix">
                            <li class="select-time">
                                <label>选择时间： </label>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${beginTime}" id="startTime" placeholder="开始时间"
                                           name="params[beginPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <span>--</span>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${endTime}" id="endTime" placeholder="结束时间"
                                           name="params[endPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                            </li>
                            <li class="btn-group">
                                <a class="thisYear btn btn-primary mlr_8">本年</a>
                                <a class="thisMonth btn btn-primary mlr_8">本月</a>
                                <a class="btn btn-primary mlr_8" onclick="reloadIt()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
        <div class="bottom-graph ">
            <div class="row" style="margin: 0">
                <div class="title col-lg-12 col-md-12 col-sm-12">
                    各大类蔬菜检测次数及比例统计
                </div>
            </div>

            <div class="bottom-box">

                <div class="row">
                    <div class="item col-sm-6  col-lg-3" th:id="${ck.caiId}" onclick="detailInfo(this)" th:each="ck:${caiClass}">
                        <div class="item-box">
                            <div class="left">
                                <h2 th:text="${ck.caiName}">共计检测</h2>
                                <p><span th:text="${ck.planCounts.count}">1200</span>次</p>
                                <div><img th:src="@{/dist/img/test-down.png}" alt=""><span th:text="${ck.planCounts.rate}+'%'">26.57%</span></div>
                            </div>
                            <div class="right">
                                <p> <img th:src="@{/dist/img/test-yuan.png}" alt=""></p>
                                <div> <img th:src="@{/dist/img/test-1.png}" alt=""></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
    </div>
    </div>


    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>

    <!-- 遮罩层 -->
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script th:src="@{/ajax/libs/layui/layui.js}"></script>
    <script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>

    <script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>

    <script th:inline="javascript">
        var ctx = [[@{
            /}]];
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            var timestamp = new Date().getTime();
            var timestamp1 = new Date().getTime() + 1000 * 60 * 60 * 24 * 2;
            //执行一个laydate实例
            laydate.render({
                elem: '#test1' //指定元素
                    ,
                format: "yyyy-MM-dd",
                value: new Date(timestamp)
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#test2' //指定元素
                    ,
                format: 'yyyy-MM',
                value: new Date(timestamp1)
            });
        });

            function reloadIt() {
                var link = ctx + "system/front_check/testingManagement";
                var s = $('#startTime').val();
                var e = $('#endTime').val();

                link += "?beginTime=" + s + "&endTime=" + e;
                window.location.href = link;
            }

            $('.thisYear').click(function () {
                $('#startTime').val(new Date().getFullYear() + "-01-01");
                reloadIt();
            });

            $('.thisMonth').click(function () {
                var d = new Date();
                var m = d.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                $('#startTime').val(new Date().getFullYear() + "-" + m + "-01");
                reloadIt();
            });

           function detailInfo(obj) {

               var link = ctx + 'system/front_check/frontCheck?ancestors=' + $(obj).attr('id');

               var s = $('#startTime').val();
               var e = $('#endTime').val();

               link += "&beginTime=" + s + "&endTime=" + e;

               $.modal.openTab("检测列表", link);
           }
    </script>
</body>

</html>
